<template>
  <div class="home">
    <!-- Hero Banner -->
    <section class="hero-section">
      <div class="hero-content">
        <img 
          v-if="appStore.storeInfo.banner" 
          :src="appStore.storeInfo.banner" 
          alt="Lucy African Fashion" 
          class="hero-image" 
        />
        <div v-else class="hero-placeholder">
          <n-icon size="120" color="var(--color-primary)">
            <ShirtOutline />
          </n-icon>
        </div>
        <div class="hero-overlay">
          <div class="container">
            <h1 class="hero-title">{{ appStore.storeInfo.site_name || 'Lucy African Fashion' }}</h1>
            <p class="hero-subtitle">
              {{ appStore.storeInfo.welcome_text || 'Your trusted African Wear Supplier from China' }}
            </p>
            <div class="hero-actions">
              <router-link to="/products" class="btn btn-primary">
                <n-icon size="20"><BagHandleOutline /></n-icon>
                <span>Shop Now</span>
              </router-link>
              <router-link to="/contact" class="btn btn-outline">
                <n-icon size="20"><ChatbubbleEllipsesOutline /></n-icon>
                <span>Contact Us</span>
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Hot Products Section -->
    <section class="section hot-products">
      <div class="container">
        <div class="section-header">
          <h2>Hot Products</h2>
          <p>Featured items from our collection</p>
        </div>

        <el-row v-loading="loading" :gutter="20">
          <el-col 
            v-for="product in hotProducts" 
            :key="product.id" 
            :xs="12" 
            :sm="12" 
            :md="8" 
            :lg="6"
          >
            <ProductCard :product="product" />
          </el-col>
        </el-row>

        <div class="section-footer">
          <router-link to="/products" class="btn btn-primary">
            View All Products
            <n-icon size="20"><ArrowForwardOutline /></n-icon>
          </router-link>
        </div>
      </div>
    </section>

    <!-- Categories Section -->
    <section class="section categories-section">
      <div class="container">
        <div class="section-header">
          <h2>Shop by Category</h2>
          <p>Find your perfect style</p>
        </div>

        <div class="categories-grid">
          <router-link 
            v-for="category in appStore.categories" 
            :key="category.id"
            :to="`/products?category=${category.id}`"
            class="category-card"
          >
            <div class="category-icon">
              <n-icon size="48" color="var(--color-primary)">
                <ShirtOutline />
              </n-icon>
            </div>
            <h3>{{ category.name_en }}</h3>
            <p>{{ category.description }}</p>
            <span class="product-count">{{ category.product_count }} items</span>
          </router-link>
        </div>
      </div>
    </section>

    <!-- About Preview Section -->
    <section class="section about-preview">
      <div class="container">
        <el-row :gutter="40" align="middle">
          <el-col :xs="24" :md="12">
            <div class="about-images">
              <img 
                v-if="appStore.storeInfo.store_images && appStore.storeInfo.store_images[0]" 
                :src="appStore.storeInfo.store_images[0]" 
                alt="Our Store" 
                class="about-image"
              />
              <div v-else class="about-placeholder">
                <n-icon size="80" color="var(--color-primary)">
                  <StorefrontOutline />
                </n-icon>
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :md="12">
            <div class="about-content">
              <h2>About Lucy African Fashion</h2>
              <p>
                {{ appStore.storeInfo.about_text || 
                  'We are located in Yulong Garment City, Yuexiu District, Guangzhou, specializing in African women\'s fashion wholesale.' }}
              </p>
              <ul class="features-list">
                <li>
                  <n-icon size="24" color="var(--color-primary)"><CheckmarkCircleOutline /></n-icon>
                  <span>Quality African Women's Fashion</span>
                </li>
                <li>
                  <n-icon size="24" color="var(--color-primary)"><CheckmarkCircleOutline /></n-icon>
                  <span>Wholesale & Retail Available</span>
                </li>
                <li>
                  <n-icon size="24" color="var(--color-primary)"><CheckmarkCircleOutline /></n-icon>
                  <span>Fast Worldwide Shipping</span>
                </li>
                <li>
                  <n-icon size="24" color="var(--color-primary)"><CheckmarkCircleOutline /></n-icon>
                  <span>Trusted Supplier from China</span>
                </li>
              </ul>
              <router-link to="/about" class="btn btn-primary">Learn More</router-link>
            </div>
          </el-col>
        </el-row>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { NIcon } from 'naive-ui'
import {
  ShirtOutline,
  BagHandleOutline,
  ChatbubbleEllipsesOutline,
  ArrowForwardOutline,
  StorefrontOutline,
  CheckmarkCircleOutline
} from '@vicons/ionicons5'
import { useAppStore } from '@/stores/app'
import { productAPI } from '@/api'
import ProductCard from '@/components/ProductCard.vue'

const appStore = useAppStore()
const hotProducts = ref([])
const loading = ref(false)

const loadHotProducts = async () => {
  try {
    loading.value = true
    const response = await productAPI.getHot()
    if (response.success) {
      hotProducts.value = response.data
    }
  } catch (error) {
    console.error('Failed to load hot products:', error)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadHotProducts()
})
</script>

<style lang="scss" scoped>
.hero-section {
  position: relative;
  height: 600px;
  overflow: hidden;
  margin-bottom: 4rem;
}

.hero-content {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-secondary-light));
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.6));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  color: white;
}

.hero-subtitle {
  font-size: 1.5rem;
  margin-bottom: 2rem;
  color: rgba(255,255,255,0.95);
}

.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  
  .btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 150px;
  }
}

.section {
  padding: 4rem 0;
  
  &.about-preview {
    background-color: var(--color-gray-light);
  }
}

.section-header {
  text-align: center;
  margin-bottom: 3rem;
  
  h2 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  p {
    font-size: 1.125rem;
    color: var(--text-secondary);
  }
}

.section-footer {
  text-align: center;
  margin-top: 3rem;
  
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.category-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 2rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
  text-decoration: none;
  color: var(--text-primary);
  
  &:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
  }
  
  .category-icon {
    margin-bottom: 1rem;
  }
  
  h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
  }
  
  p {
    color: var(--text-secondary);
    margin-bottom: 1rem;
  }
  
  .product-count {
    display: inline-block;
    padding: 0.25rem 1rem;
    background-color: var(--color-primary-light);
    border-radius: 20px;
    font-size: 0.875rem;
    color: var(--color-accent);
    font-weight: 600;
  }
}

.about-images {
  .about-image {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
  }
  
  .about-placeholder {
    width: 100%;
    height: 400px;
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-secondary-light));
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.about-content {
  h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  
  p {
    font-size: 1.125rem;
    line-height: 1.8;
    margin-bottom: 2rem;
  }
}

.features-list {
  list-style: none;
  padding: 0;
  margin-bottom: 2rem;
  
  li {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 1.125rem;
  }
}

@media (max-width: 768px) {
  .hero-section {
    height: 400px;
  }
  
  .hero-title {
    font-size: 2rem;
  }
  
  .hero-subtitle {
    font-size: 1.125rem;
  }
  
  .section {
    padding: 2rem 0;
  }
  
  .section-header h2 {
    font-size: 2rem;
  }
  
  .about-images {
    margin-bottom: 2rem;
  }
}
</style>

